<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_表单输出绑定</title>
</head>
<body>
<!--
1.使用v-model(双向数据绑定)自动收集数据
    text/textarea
    checkbox
    radio
    select
-->

<div id="example">
    <form action="xxxx" @submit.prevent="handleSubmit"> <!--prevent 取消自动提交-->
        <span>用户名</span>
        <input type="text" v-model="username"><br>

        <span>密码</span>
        <input type="password" v-model="pwd"><br>

        <span>性别</span>
        <input type="radio" id="female" value="女" v-model="sex">
        <label for="female">女</label>
        <input type="radio" id="male" value="男"   v-model="sex">
        <label for="male">男</label><br><br>

        <span>爱好</span>
        <input type="checkbox" id="basket" value="basket" v-model="likes">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="foot" v-model="likes">
        <label for="foot">足球</label>
         <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
        <label for="pingpang">乒乓</label>
        <br><br>
        <span>城市： </span>
        <select v-model="cityId">
            <option value="">未选择</option>
            <option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option>
        </select><br>
        <textarea rows="10" v-model="desc"></textarea><br><br>

        <input type="submit" value="注册" >
    </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
const vm =new Vue({
    el:'#example',
    data:{
        username: '',
        pwd: '',
        sex: '女',
        likes:['pingpang','foot'],
        allCitys:[{id:1,name:'BJ'},{id:2,name:'GD'},{id:3,name:'SH'}],
        cityId:'',
        desc:''
    },
    methods:{
        handleSubmit(){
            console.log(this.username,this.pwd);
            console.log(this)//可以从this中取出表单中的数据，然后用ajax请求发送到后台
        }
    }
})

</script>


</body>
</html>